<template>
  <!-- 接口管理 -->
  <div class="module_par">
    <div class="module_con">
      <!-- 搜索区域 -->
      <div class="search_box">
        <el-row :gutter="20" class="box_center">
          <el-col>
            <span class="searchTxt">接口名称:</span>
            <el-input v-model="searchBox.name" autocomplete="off" size="small" class="searchInp"></el-input>
            <el-button
              type="primary"
              class="searchBtn"
              @click="goSearch()"
              size="small"
              v-if="$requestBtnApi.interfaceManagement.queryBtn"
            >查询</el-button>
            <el-button type="primary" class="searchBtn reditBtn" @click="redit()" size="small">重置</el-button>
            <el-button
              type="primary"
              class="searchBtn reditBtn"
              @click="addData('','1')"
              size="small"
              v-if="$requestBtnApi.interfaceManagement.addBtn"
            >新增</el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 主体内容 -->
      <div class="table-content">
        <el-table
          :data="tableData"
          border
          tooltip-effect="dark"
          style="width: 100%"
          row-key="id"
          highlight-current-row
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column type="index" align="center" label="#"></el-table-column>
          <el-table-column prop="apiName" label="接口名称"></el-table-column>
          <el-table-column prop="apiUrl" align="center" label="接口地址"></el-table-column>
          <!-- <el-table-column prop="createUser" align="center" label="创建人"></el-table-column>
          <el-table-column prop="createTime" align="center" label="创建时间"></el-table-column>-->
          <el-table-column prop="updateUser" align="center" label="修改人"></el-table-column>
          <el-table-column prop="updateTime" align="center" label="修改时间"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <a
                class="table_a"
                @click="addData(scope.row)"
                v-if="$requestBtnApi.interfaceManagement.addBtn"
              >
                <i class="el-icon-circle-plus-outline"></i>新 增
              </a>
              <a
                class="table_a table_a_left"
                @click="editData(scope.row)"
                v-if="$requestBtnApi.interfaceManagement.editBtn"
              >
                <i class="el-icon-edit"></i>编 辑
              </a>
              <a
                class="table_a table_a_left table_a_del"
                @click="delData(scope.row)"
                v-if="!scope.row.children.length && $requestBtnApi.interfaceManagement.delBtn"
              >
                <i class="el-icon-delete"></i>删 除
              </a>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 编辑 -->
      <el-dialog title="接口编辑" :visible.sync="dialogEditSta">
        <el-form :model="editList" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="接口名称:">
                <el-input v-model="editList.name" autocomplete="off" size="small" class="searchInp"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="接口地址:">
                <el-input v-model="editList.path" autocomplete="off" size="small" class="searchInp"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogEditSta = false" size="small">取 消</el-button>
          <el-button type="primary" @click="editYes" size="small">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 新增 -->
      <el-dialog title="新增" :visible.sync="dialogAddSta">
        <el-form :model="addList" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="接口名称:">
                <el-input v-model="addList.name" autocomplete="off" size="small" class="searchInp"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="接口地址:">
                <el-input v-model="addList.path" autocomplete="off" size="small" class="searchInp"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="!addSta">
            <el-col :span="12">
              <el-form-item label="上级:">
                <el-input
                  v-model="addList.parentName"
                  autocomplete="off"
                  size="small"
                  class="searchInp"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddSta = false" size="small">取 消</el-button>
          <el-button type="primary" @click="addYes" size="small">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // permissionList: {
      //   cx: false,
      //   xz: false,
      //   bj: false,
      //   sc: false,
      // },
      searchBox: {
        name: "",
      }, // 搜索内容
      tableData: [], // table数据
      dialogEditSta: false, // 编辑弹框判断
      editList: {
        id: "", // 接口id
        name: "", // 接口名称
        path: "", // 接口地址
      }, // 编辑弹框数据
      searchSta: false, //搜索状态
      dialogAddSta: false, //新增弹框状态
      addList: {
        name: "", // 接口名称
        path: "", // 接口地址
        parentId: "", // 父id
        parentName: "", // 父接口名称
      }, //新增弹框 数据
      editDataList: null,
      addSta: false,
    };
  },
  methods: {
    // 删除接口
    delData(val) {
      this.$confirm(
        "此操作将删除'" + val.apiName + "'接口及子项, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$requestA[this.$requestBtnApi.interfaceManagement.delType](
            this.$requestBtnApi.interfaceManagement.delUrl + "/" + val.id,
            {},
            (res) => {
              this.getTableList();
              if (res.code == "200") {
                this.$message.success("删除成功");
              }
            }
          );
        })
        .catch(() => {});
    },
    // 新增按钮
    addData(val, sta) {
      if (sta == "1") {
        this.addSta = true;
      } else {
        this.addSta = false;
      }
      this.addList.name = "";
      this.addList.path = "";
      this.addList.parentName = val.apiName;
      this.addList.parentId = this.addSta ? "0" : val.id;
      this.dialogAddSta = true;
    },
    // 重置
    redit() {
      this.searchBox.name = "";
      this.searchSta = false;
      this.getTableList();
    },
    // 搜索
    goSearch() {
      this.searchSta = true;
      this.getTableList();
    },
    // 新增确定
    addYes() {
      if (this.addList.name.trim() == "") {
        this.$message.error("请输入接口名称");
        return false;
      }
      if (this.addList.path.trim() == "") {
        this.$message.error("请输入接口地址");
        return false;
      }
      const data = {
        apiName: this.addList.name,
        apiUrl: this.addList.path,
        parentId: this.addList.parentId,
      };
      this.$requestA[this.$requestBtnApi.interfaceManagement.addType](
        this.$requestBtnApi.interfaceManagement.addUrl,
        data,
        (res) => {
          this.dialogAddSta = false;
          this.getTableList();
          if (res.code == "200") {
            this.$message.success("操作成功");
          }
        }
      );
    },
    // 编辑确定
    editYes() {
      if (this.editList.name.trim() == "") {
        this.$message.error("请输入接口名称");
        return false;
      }
      if (this.editList.path.trim() == "") {
        this.$message.error("请输入接口地址");
        return false;
      }
      const data = {
        apiName: this.editList.name,
        apiUrl: this.editList.path,
        id: this.editDataList.id,
        parentId: this.editDataList.parentId,
        updateUser: localStorage.getItem("User_Name"),
      };
      // this.editDataList.apiName = this.editList.name;
      // this.editDataList.apiUrl = this.editList.path;
      // this.editDataList.updateUser = localStorage.getItem('User_Name')
      this.$requestA[this.$requestBtnApi.interfaceManagement.editType](
        this.$requestBtnApi.interfaceManagement.editUrl,
        data,
        (res) => {
          this.dialogEditSta = false;
          this.getTableList();
          if (res.code == "200") {
            this.$message.success("操作成功");
          }
        }
      );
    },
    // 编辑按钮
    editData(data) {
      this.editDataList = data;
      this.editList.id = data.id;
      this.editList.name = data.apiName;
      this.editList.path = data.apiUrl;
      this.dialogEditSta = true;
    },
    //   获取table数据
    getTableList() {
      const data = {
        apiName: this.searchSta ? this.searchBox.name : "",
      };
      this.$requestA[this.$requestBtnApi.interfaceManagement.queryType](
        this.$requestBtnApi.interfaceManagement.queryUrl,
        data,
        (res) => {
          console.log(res);
          this.tableData = res.data;
        }
      );
    },
  },
  created() {
    this.$route.meta.menuList.map((item) => {
      console.log(item);
      if (item.eleName == "查询") {
        this.$requestBtnApi.interfaceManagement.queryUrl = item.eleUrl;
        this.$requestBtnApi.interfaceManagement.queryType =
          item.operType == "delete" ? "dele" : item.operType;
        this.$requestBtnApi.interfaceManagement.queryBtn = true;
      } else if (item.eleName == "新增") {
        this.$requestBtnApi.interfaceManagement.addUrl = item.eleUrl;
        this.$requestBtnApi.interfaceManagement.addType =
          item.operType == "delete" ? "dele" : item.operType;
        this.$requestBtnApi.interfaceManagement.addBtn = true;
      } else if (item.eleName == "编辑") {
        this.$requestBtnApi.interfaceManagement.editUrl = item.eleUrl;
        this.$requestBtnApi.interfaceManagement.editType =
          item.operType == "delete" ? "dele" : item.operType;
        this.$requestBtnApi.interfaceManagement.editBtn = true;
      } else if (item.eleName == "删除") {
        this.$requestBtnApi.interfaceManagement.delUrl = item.eleUrl;
        this.$requestBtnApi.interfaceManagement.delType =
          item.operType == "delete" ? "dele" : item.operType;
        this.$requestBtnApi.interfaceManagement.delBtn = true;
      }
    });
    this.getTableList();
  },
};
</script>

<style scoped>
@import "../../assets/css/base.css";
.search_box {
  background: #fff;
  border-radius: 5px;
  padding: 40px 40px 60px 40px;
  margin: 0 0 20px 0;
}
.box_center {
  text-align: left;
}
.searchBtn {
  margin-left: 80px;
}
.reditBtn {
  margin-left: 20px;
}
</style>
